<!-- 统计分析 - 数据目录 -->
<!-- 输送介质 https://docs.qq.com/sheet/DUW50Ym1VR0ZUYW5x?no_promotion=1&tab=BB08J2 -->
<!-- 工作量（公里）		
      热力公司	热水	蒸汽	合计
      青岛金洲热力有限公司	83.4		83.4
      青岛开源胶州热电有限公司	47.1	4.5	51.6
      青岛能源发展(胶州)有限公司上合示范区分公司	8.4		8.4
      青岛家盛热力有限公司	85.3		85.3
      青岛龙发热电有限公司	54.7	10	64.7
      青岛新阳能源热力服务有限责任公司	20.6		20.6
      青岛中节能建筑能源公司	12.4		12.4
      青岛海能达热力有限公司	130		130
      青岛兆源供热有限公司	42.5		42.5
        484.4	14.5	498.9 -->
<script>
import { defineComponent } from 'vue';
import GlobalCard from '@/components/GlobalCard/global-card.vue';
import iconJianxiujing from '@/components/LayerTree/images/icon-检修井.svg';
import iconFamen from '@/components/LayerTree/images/icon-阀门.svg';
import Api from "@/api";
let MyChart = null;
let CountObj = {};
export default defineComponent({
  name: "SectionTwo",
  components: {
    GlobalCard,
  },
  setup() {
  },
  data() {
    return {
      iconFamen: iconFamen,
      iconJianxiujing: iconJianxiujing,
      data_1: 25,
      data_2: 12,
      data_3: 7,
      data_7: 0,
      data_8: 0,
      activeId: 'length',
      listData: [{
        name: '长度',
        id: 'length'
      }, {
        name: '输送介质',
        id: 'health'
      }],
      isLoading: false
    }
  },
  mounted() {
    setTimeout(() => {
      this.setSelect(this.activeId);
      this.init();
    }, 30)
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    init() {
      //   检修井
      Api.getDataOfJXJ({
        ids: [],
        fields: []
      }).then(res => {
        this.data_7 = res.features.length;
      })
      //   阀门
      Api.getDataOfFAMEN({
        ids: [],
        fields: []
      }).then(res => {
        this.data_8 = res.features.length;
      })
    },
    initLength() {
      this.isLoading = true;
      const obj = Object.create(null);
      render([{ "name": "暖域", "value": 0 }, { "name": "幸福源", "value": 0 }, { "name": "中节能", "value": 12.4 }, { "name": "新阳", "value": 20.6 }, { "name": "兆源", "value": 42.5 }, { "name": "开源胶州", "value": 51.6 }, { "name": "龙发", "value": 64.7 }, { "name": "家盛", "value": 85.3 }, { "name": "能源发展", "value": 91.8 }, { "name": "海能达", "value": 130 }], 498.9)
      this.isLoading = false;
      return
      Api.getDataOfGRGX({
        ids: [],
        fields: ['QSDW', 'SHAPE_LENGTH']
      }).then(res => {
        this.isLoading = false;
        res.features.forEach((v, i) => {
          const pro = v.properties;
          if (!obj[pro.QSDW]) {
            obj[pro.QSDW] = Number(pro.SHAPE_LENGTH)
          } else {
            obj[pro.QSDW] = obj[pro.QSDW] + Number(pro.SHAPE_LENGTH)
          }
        })
        const category = [];
        Object.keys(obj).forEach(v => {
          category.push({
            name: v,
            value: Number((obj[v] / 1000).toFixed(1))
          })
        })
        category.push({
          name: '暖域',
          value: 0
        })
        category.push({
          name: '幸福源',
          value: 0
        })

        category.forEach(v => {
          if (v.name.indexOf('海能达') !== -1) { v.name = '海能达'; v.value = 130 }
          if (v.name.indexOf('家盛') !== -1) { v.name = '家盛'; v.value = 85.3 }
          if (v.name.indexOf('兆源') !== -1) { v.name = '兆源'; v.value = 42.5 }
          if (v.name.indexOf('新阳') !== -1) { v.name = '新阳'; v.value = 20.6 }
          if (v.name.indexOf('开源胶州') !== -1) { v.name = '开源胶州'; v.value = 51.6 }
          if (v.name.indexOf('龙发') !== -1) { v.name = '龙发'; v.value = 64.7 }
          if (v.name.indexOf('中节能') !== -1) { v.name = '中节能'; v.value = 12.4 }
          if (v.name.indexOf('能源发展') !== -1) { v.name = '能源发展'; v.value = 91.8 }
        })
        category.sort(function (a, b) {
          let v1 = a.value;
          let v2 = b.value;
          if (v1 < v2) {
            return -1
          } else {
            return 0
          }
        })
        let totalData = category.reduce((p, a) => { return p + a.value }, 0)
        totalData = Number(totalData.toFixed(2))
        console.log(JSON.stringify(category), totalData)
        render(category, totalData)
      });
      function render(category, totalData) {
        MyChart = echarts.init(document.getElementById('Gongreguanxiantongji'));
        // var total = 0; // 数据总数
        var total = Math.max(...category.map(v => {
          return v.value
        }))
        var datas = [];
        category.forEach(value => {
          value.label = {
            fontFamily: 'alimamashuheiti',
            fontSize: '14'
          }
          datas.push(value.value);
        });
        const option = {
          // backgroundColor: '#071347',
          // title: {
          //   text: 'km',
          //   right: 10,
          //   textStyle: {
          //     color: '#fff',
          //     fontSize: 12
          //   }
          // },
          xAxis: {
            max: total,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          grid: {
            left: 80,
            top: 20, // 设置条形图的边距
            right: 100,
            bottom: 20
          },
          yAxis: [{
            type: "category",
            inverse: false,
            data: category,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            }
          }],
          series: [{
            // 内
            type: "bar",
            barWidth: 14,
            legendHoverLink: false,
            silent: true,
            itemStyle: {
              normal: {
                color: function (params) {
                  var color;
                  if (params.dataIndex == 19) {
                    color = {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [{
                        offset: 0,
                        color: "#EB5118" // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#F21F02" // 100% 处的颜色
                      }
                      ]
                    }
                  } else if (params.dataIndex == 18) {
                    color = {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [{
                        offset: 0,
                        color: "#FFA048" // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#B25E14" // 100% 处的颜色
                      }
                      ]
                    }
                  } else if (params.dataIndex == 17) {
                    color = {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [{
                        offset: 0,
                        color: "#F8E972" // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#E5C206" // 100% 处的颜色
                      }
                      ]
                    }
                  } else {
                    color = {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [{
                        offset: 0,
                        color: "#1588D1" // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#0F4071" // 100% 处的颜色
                      }
                      ]
                    }
                  }
                  return color;
                },
              }
            },
            label: {
              normal: {
                show: true,
                position: "left",
                formatter: "{b}",
                textStyle: {
                  color: "#fff",
                  fontSize: 14
                }
              }
            },
            data: category,
            z: 1,
            animationEasing: "elasticOut"
          },
          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#061348"
              }
            },
            symbolRepeat: "fixed",
            symbolMargin: 6,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [1, 16],
            symbolPosition: "start",
            symbolOffset: [1, -2],
            symbolBoundingData: total,
            data: category,
            z: 2,
            animationEasing: "elasticOut"
          },
          {
            // 外边框
            type: "pictorialBar",
            symbol: "rect",
            symbolBoundingData: total,
            itemStyle: {
              normal: {
                color: "none"
              }
            },
            label: {
              position: 'right',
              distance: 20,
              fontFamily: 'alimamashuheiti',
              color: '#fff',
              fontSize: '18',
              show: true
            },
            data: datas,
            z: 0,
            animationEasing: "elasticOut"
          },
          {
            name: "外框",
            type: "bar",
            barGap: "-120%", // 设置外框粗细
            data: [total, total, total, total, total, total, total, total, total, total],
            barWidth: 20,
            itemStyle: {
              normal: {
                color: "transparent", // 填充色
                barBorderColor: "#1C4B8E", // 边框色
                barBorderWidth: 1, // 边框宽度
                // barBorderRadius: 0, //圆角半径
                label: {
                  // 标签显示位置
                  show: false,
                  position: "top" // insideTop 或者横向的 insideLeft
                }
              }
            },
            z: 0
          }
          ],
          graphic: [
            {
              type: 'text',
              right: '10%',
              top: '0',
              style: {
                fontFamily: 'alimamashuheiti',
                text: '单位 (km)',
                textAlign: 'center',
                fill: '#fff',
                fontSize: 12,
                lineHeight: 20,
              }
            },
            {
              type: 'text',
              right: '10%',
              bottom: '0',
              style: {
                fontFamily: 'alimamashuheiti',
                text: '总计: ' + totalData + ' km',
                textAlign: 'center',
                fill: '#fff',
                fontSize: 12,
                lineHeight: 20,
              }
            }
          ]
        };
        MyChart.setOption(option);
      }
    },
    initMaters() {
      this.isLoading = true;
      const obj = Object.create(null);
      render([{ "value": 484.4, "name": "热水" }, { "value": 14.5, "name": "蒸汽" }], 498.9)
      this.isLoading = false;
      return
      Api.getDataOfGRGX({
        ids: [],
        fields: ['TSJZ', 'SHAPE_LENGTH']
      }).then(res => {
        this.isLoading = false;
        res.features.forEach((v, i) => {
          const pro = v.properties;
          // TSJZ
          if (!obj[pro.TSJZ]) {
            obj[pro.TSJZ] = Number(pro.SHAPE_LENGTH)
          } else {
            obj[pro.TSJZ] = obj[pro.TSJZ] + Number(Number(pro.SHAPE_LENGTH).toFixed(0))
          }
        })
        // console.log(obj, 'obj')
        let totalData = 0;
        const categoryData = [];
        Object.keys(obj).forEach(v => {
          let value = 0;
          if (!v) {
            v = '未知';
            value = obj[''];
          } else {
            value = obj[v]
          }
          totalData = totalData + value;
          categoryData.push({
            value: Number((value / 1000).toFixed(1)),
            name: v
          })
        })
        totalData = Number((totalData / 1000).toFixed(1))
        console.log(JSON.stringify(categoryData), totalData)
        render(categoryData, totalData)
      })
      function render(categoryData, totalData) {
        MyChart = echarts.init(document.getElementById('Gongreguanxiantongji'));
        let color = ['#a0d911', '#faa405', '#13c2c2', '#1677ff', '#2f54eb', '#722ed1']
        let option = {
          color: color,
          title: {
            left: 'center',
            top: '50%',
            textStyle: {
              fontSize: 16,
              color: '#fff',
              fontWeight: 'normal'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function (param) {
              const result = param.marker + param.name + ' : ' + Number(Number(param.value).toFixed(1)) + ' ' + 'km<br/>';
              return result;
              // console.log(param)
              // return ''
              // const result = param[0].name + "<br/>" + param[0].value + ' ' + '件<br/>';
              // return result;
            },
            textStyle: {
              fontFamily: 'ALIBABAPUHUI-REGU'
            }
          },
          legend: {
            left: 20,
            top: 10,
            itemWidth: 13,
            itemHeight: 8,
            borderRadius: 0,
            icon: 'rect',
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1,
            },
            textStyle: {
              color: '#fff',
              fontSize: '14',
              fontFamily: 'ALIBABAPUHUI-REGU'
            }
          },
          series: [{
            type: 'pie',
            // roseType: 'radius',
            radius: ['30%', '50%'],
            data: categoryData,
            label: {
              normal: {
                formatter: '{font|{c} km}\n{hr|}\n{font|{d}%}',
                rich: {
                  font: {
                    fontSize: 12,
                    padding: [5, 0],
                    color: '#fff'
                  },
                  hr: {
                    height: 0,
                    borderWidth: 1,
                    width: '100%',
                    borderColor: '#fff'
                  }
                }
              },
            },
            labelLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              itemStyle: {
                borderColor: '#fff', // 边框颜色
                borderWidth: 2,        // 边框宽度
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
              }
            }
          }],
          graphic: [
            {
              type: 'text',
              left: 'center',
              bottom: '40%',
              style: {
                fontFamily: 'alimamashuheiti',
                text: '总计(km)', // 要显示的数字
                textAlign: 'center',
                fill: '#fff', // 文字颜色
                fontSize: 16,
                lineHeight: 20,
              }
            },
            {
              type: 'text',
              left: 'center',
              bottom: '50%',
              style: {
                fontFamily: 'alimamashuheiti',
                text: totalData, // 要显示的数字
                textAlign: 'center',
                fill: '#fff', // 文字颜色
                fontSize: 20,
                lineHeight: 20,
              }
            }
          ]
        };
        MyChart.setOption(option);

        MyChart.on('legendselectchanged', function (params) {
          const selected = params.selected;
          let mainTotal = 0;
          categoryData.forEach(v => {
            if (selected[v.name]) {
              mainTotal = mainTotal + v.value
            }
          })
          mainTotal = Number(Number(mainTotal).toFixed(1))
          option.graphic[1].style.text = mainTotal;
          MyChart.setOption(option);
        })

        MyChart.on('click', (params) => {
          return
          const rv = params.data.rv;
          const name = params.name;
          if (!CountObj[name]) {
            CountObj[name] = 1
          } else {
            CountObj[name]++
          }

          this.$MITT_BUS.emit('send-pipline-realdata', {
            data: rv,
            count: CountObj[name],
            color: params.color
          })

          let dataIndex = params.dataIndex;
          // 更新被点击部分的边框样式
          option.series[0].data.forEach(function (dataItem, index) {
            dataItem.itemStyle = {
              borderColor: '#fff',
              borderWidth: 0
            };
            if (!(CountObj[name] % 2)) {
            } else if (dataItem.name === name) {
              dataItem.itemStyle = {
                borderColor: '#fff',
                borderWidth: 2
              };
            }

          });
          MyChart.setOption(option);
        })
      }
    },
    setSelect(e) {
      if (MyChart) {
        MyChart.dispose();
      }
      if (e === 'length') {
        this.initLength();
      } else {
        this.initMaters();
      }
    }
  }
});
</script>
<template>
  <div class="section-six">
    <GlobalCard :mainTitle="'管线统计'" :activeId="activeId" :showSelect="true" :listData="listData"
      @change="(e) => { setSelect(e) }">
      <template #body>
        <!-- 代码 -->
        <div id="Fushusheshi">
          <div class="inner">
            <div class="item dou data-7">
              <div class="name font-HONGMENG-SC">
                <img class="icon" :src="iconJianxiujing" />
                <span>检修井</span>
              </div>
              <div class="numb">
                <span class="data data-33 font-YouSheBiaoTiHei">
                  <count-to :startVal="0" :endVal="data_7" :duration="3000" :autoplay="true" />
                </span>
                <span class="unit "> 个</span>
              </div>
            </div>

            <div class="item dou data-8">
              <div class="name font-HONGMENG-SC">
                <img class="icon" :src="iconFamen" />
                <span>阀门</span>
              </div>
              <div class="numb">
                <span class="data data-33 font-YouSheBiaoTiHei">
                  <count-to :startVal="0" :endVal="data_8" :duration="3000" :autoplay="true" />
                </span>
                <span class="unit "> 个</span>
              </div>
            </div>
          </div>
          <div class="mask" />
        </div>
        <div id="Gongreguanxiantongji" v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.2)">
        </div>
      </template>
    </GlobalCard>
  </div>
</template>
<style scoped lang="less">
.section-six {
  position: fixed;
  top: 57rem;
  right: 44rem;
}

#Gongreguanxiantongji {
  width: 100%;
  height: 36rem;
}

#Fushusheshi {
  position: relative;

  &>.inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;

    &>.item {
      font-size: 1rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: url(./images/item-bg.svg);
      background-repeat: no-repeat;
      background-color: rgba(30, 100, 190, .3);
      transition: all .3s;
      margin-bottom: .2rem;
      height: 7rem;

      &.tri {
        width: 33%;
      }

      &.dou {
        width: 49.5%;
      }

      &:hover {
        background-color: rgba(30, 100, 190, .5);
      }

      &>.numb {
        margin-top: .5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 3rem;

        &>span.data {
          font-size: 2.5rem;
          font-weight: bolder;

          &.small-size {
            //font-size: 1.5rem;
          }

          &.data-2 {
            color: #ff8d0e;
          }

          &.data-3 {
            color: #40f148;
          }

          &.data-33 {
            color: #f4ea2a;
          }
        }

        &>span.unit {
          margin-top: 3px;
          margin-left: .5rem;
          font-size: 1.5rem;
        }
      }

      &>.name {
        margin-top: .5rem;
        font-size: 1.5rem;
        line-height: 2rem;
        font-family: "alimamashuheiti" !important;
        display: flex;
        align-items: center;

        &>.icon {
          width: 2rem;
          height: 2rem;
        }

        &>span {
          margin-left: .5rem;
        }
      }
    }
  }
}
</style>